<template>
  <div class="app-container">
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" style="height:900px">
      <el-col :span="24">
        <el-col :span="12">
          <el-col :span="24">
            <el-col :span="8">
              服务器端数据监控
              <el-button type="primary" style="margin-left:10px;margin-right: 10px;" @click="getparam()">报警设置
              </el-button>
            </el-col>
            <el-col :span="1" style="line-height:35px;width:40px;" v-if="openvalue == false">关闭</el-col>
            <!-- <el-col :span="1" v-else>&nbsp;</el-col> -->
            <el-col :span="2" style="text-align:center;line-height:35px;">
              <el-switch v-model="openvalue" active-color="#13ce66" inactive-color="#ff4949" @change="openwarring()">
              </el-switch>
            </el-col>
            <el-col :span="2" style="line-height:35px;" v-if="openvalue == true">开启报警</el-col>
            <el-col :span="6" style="line-height:35px;display:flex;align-item:center;margin-left:40px;">
                <div style="width:270px;">创建订单预警值</div>
                <el-input v-model="cjddyjz" @input="setcjddyjz" type="number"></el-input>
            </el-col>
          </el-col>
          <el-col :span="24" style="margin-top:15px;">
            <el-col :span="8">
              <div class="boxlist">
                <div class="boxlist_title">
                  创建订单
                </div>
                <div class="boxlist_num">
                  {{ dataobj.order_listen_info.listen_info.order_create_count }}
              </div>
                  <div class="boxlist_title">
                    支付下单
                  </div>
                  <div class="boxlist_num">
                    {{ dataobj.order_listen_info.listen_info.order_pay_create_count }}
              </div>
                  </div>
            </el-col>
            <el-col :span="8">
              <div class="boxlist">
                <div class="boxlist_title">
                  支付回调
                </div>
                <div class="boxlist_num">
                  {{ dataobj.order_listen_info.listen_info.order_pay_notify_count }}
                </div>
                  <div class="boxlist_title">
                    处理成功
                  </div>
                  <div class="boxlist_num">
                    {{ dataobj.order_listen_info.listen_info.order_pay_success_count }}
                </div>
                  </div>
            </el-col>
            <el-col :span="8">
              <div class="boxlist">
                <div class="boxlist_title">
                  指令发送
                </div>
                <div class="boxlist_num">
                  {{ dataobj.order_listen_info.listen_info.order_outgoods_count }}
                </div>
                  <div class="boxlist_title">
                    结果接收
                  </div>
                  <div class="boxlist_num">
                    {{ dataobj.order_listen_info.listen_info.order_checkoutnotify_count }}
                </div>
                  </div>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="6">
            <div id='pie1' style="width: 100%;height:200px; margin:0 auto;"></div>
          </el-col>
          <el-col :span="6">
            <div id='pie2' style="width: 100%;height:200px; margin:0 auto;"></div>
          </el-col>
          <el-col :span="6">
            <div id='pie7' style="width: 100%;height:200px; margin:0 auto;"></div>
          </el-col>
          <el-col :span="6">
            <div id='pie8' style="width: 100%;height:200px; margin:0 auto;"></div>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="24">
        <div id='line1' style="width: 100%;height:200px; margin:0 0 0 20px;"></div>
      </el-col>
      <div style="display:none">
        <el-col :span="24">
          <el-col :span="12">
            <el-col :span="24">
              售货机端数据监控
            </el-col>
            <el-col :span="24" style="margin-top:15px;">
              <el-col :span="8">
                <div class="boxlist">
                  <div class="boxlist_title">
                    订单总数
                  </div>
                  <div class="boxlist_num">
                    9999999
                  </div>
                  <div class="boxlist_title">
                    异常订单总数
                  </div>
                  <div class="boxlist_num">
                    9999999
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="boxlist">
                  <div class="boxlist_title">
                    无响应
                  </div>
                  <div class="boxlist_num">
                    9999999
                  </div>
                  <div class="boxlist_title">
                    无法解析数据
                  </div>
                  <div class="boxlist_num">
                    9999999
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="boxlist">
                  <div class="boxlist_title">
                    转动超正常值
                  </div>
                  <div class="boxlist_num">
                    9999999
                  </div>
                  <div class="boxlist_title">
                    转动时间0秒
                  </div>
                  <div class="boxlist_num">
                    9999999
                  </div>
                </div>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="6">
              <div id='pie3' style="width: 98%;height:200px; margin:0 auto;"></div>
            </el-col>
            <el-col :span="6">
              <div id='pie4' style="width: 98%;height:200px; margin:0 auto;"></div>
            </el-col>
            <el-col :span="6">
              <div id='pie5' style="width: 98%;height:200px; margin:0 auto;"></div>
            </el-col>
            <el-col :span="6">
              <div id='pie6' style="width: 98%;height:200px; margin:0 auto;"></div>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24">
          <div id='line2' style="width: 90%;height:200px; margin:0 auto;"></div>
        </el-col>
      </div>
      <el-dialog :visible.sync="dialogVisible" title="报警设置" width="400px">
        <el-form label-width="180px" label-position="right" :model="alert_config">
          <el-form-item label="支付回调成功比值">
            <el-col :span="9">
              <el-input type="Number" min="0" max="100" v-model="alert_config.pay_success_percentage" oninput="if(value > 100) value = 100;if(value < 0) value = 0"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 10px;">%</el-col>
          </el-form-item>
          <el-form-item label="订单整体成功比值">
            <el-col :span="9">
              <el-input v-model="alert_config.checkoutnotify_percentage" oninput="if(value > 100) value = 100;if(value < 0) value = 0"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 10px;">%</el-col>
          </el-form-item>
          <el-form-item label="支付成功率">
            <el-col :span="9">
              <el-input v-model="alert_config.payment_rate_percentage" oninput="if(value > 100) value = 100;if(value < 0) value = 0"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 10px;">%</el-col>
          </el-form-item>
          <el-form-item label="购买流程完整比值">
            <el-col :span="9">
              <el-input v-model="alert_config.process_success_percentage" oninput="if(value > 100) value = 100;if(value < 0) value = 0"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 10px;">%</el-col>
          </el-form-item>
          <el-form-item label="电机转动异常比值">
            <el-col :span="9">
              <el-input v-model="alert_config.rotation_error_percentage" oninput="if(value > 100) value = 100;if(value < 0) value = 0"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 10px;">%</el-col>
          </el-form-item>
          <el-col :span="24" style="text-align: center;">
            <el-button type="primary" style="margin-left:10px;" @click="saveconifg()">保存
            </el-button>
          </el-col>
        </el-form>
        <div style="clear: both;"></div>
      </el-dialog>
      <el-dialog :visible.sync="dialogVisible2" width="400px">
        <el-col :span="24" style="text-align: center;margin-bottom: 20px;">
          <img src="../../assets/warring.png">
        </el-col>
        <el-col :span="24" class="wartitle" v-if="series_war == true">
          服务器异常告警
        </el-col>
        <el-col :span="24" class="wartitle" v-if="cjdd_war == true">
          创建订单预警
        </el-col>
        <el-col :span="24" class="wartitle" v-if="mch_war == true">
          电机转动异常告警
        </el-col>
        <el-col :span="24" style="text-align: center;margin-top: 20px;">
          <el-button type="primary" @click="warringclose()">确定
          </el-button>
        </el-col>

        <div style="clear: both;"></div>
      </el-dialog>
      <audio ref="initAudio" autoplay controls src="../../assets/warring.mp3" @ended="audioFinished" :hidden="true">
      </audio>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        dialogVisible2: false,
        openvalue: false,
        cjddyjz: window.localStorage.getItem('cjddyjz')||'', // 创建订单预警值
        cjdd_war: false,
        loading: true,
        test: '',
        alert_config: {
          pay_success_percentage: '',
          checkoutnotify_percentage: '',
          rotation_error_percentage: '',
          payment_rate_percentage: '',
          process_success_percentage: '',
        },
        dataobj: {
          "order_listen_info": {
            "listen_info": {
              "order_create_count": 0,
              "order_pay_create_count": 0,
              "order_pay_notify_count": 0,
              "order_pay_success_count": 0,
              "order_outgoods_count": 0,
              "order_checkoutnotify_count": 0
            },
            "line_data": {
              "legend_data": [
                "创建订单",
                "支付下单",
                "支付回调",
                "处理成功",
                "指令发送数",
                "结果接收"
              ],
              "xAxis_data": [
                "2022-08-03 09:25",
                "2022-08-03 09:26"
              ],
              "series_data": [
              {
                "name": "创建订单",
                "type": "line",
                "stack": "total1",
                "label": "labelOption",
                "data": [
                  83,
                  100
                ]
              },
              {
                "name": "支付下单",
                "type": "line",
                "stack": "total2",
                "label": "labelOption",
                "data": [
                  124,
                  125
                ]
              },
              {
                "name": "支付回调",
                "type": "line",
                "stack": "total3",
                "label": "labelOption",
                "data": [
                  75,
                  147
                ]
              },
              {
                "name": "处理成功",
                "type": "line",
                "stack": "total4",
                "label": "labelOption",
                "data": [
                  75,
                  136
                ]
              },
              {
                "name": "指令发送数",
                "type": "line",
                "stack": "total5",
                "label": "labelOption",
                "data": [
                  8,
                  20
                ]
              },
              {
                "name": "结果接收",
                "type": "line",
                "stack": "total6",
                "label": "labelOption",
                "data": [
                  77,
                  91
                ]
              }]
            },
            "pie_data": {
              "pay_success": [
              {
                "value": 51791,
                "name": "创建订单"
              },
              {
                "value": 11304,
                "name": "处理成功"
              }],
              "checkoutnotify": [
              {
                "value": 51791,
                "name": "创建订单"
              },
              {
                "value": 18175,
                "name": "结果接收"
              }]
            }
          },
          "mch_listen_info": {},
          "alert_config": {
            "pay_success_percentage": 0,
            "checkoutnotify_percentage": 0,
            "rotation_error_percentage": 0,
            "payment_rate_percentage": 0,
            "process_success_percentage": 0,
          }
        }, //应面所有数据都通过接口给到这个对象
        series_war: false,
        mch_war: false
      }
    },
    created() {

    },
    mounted() {
      this.getdata()
      this.warringclose()
      // this.initechartsforpie('pie3')
      // this.initechartsforpie('pie4')
      // this.initechartsforpie('pie5')
      // this.initechartsforpie('pie6')

      //this.initechartsforline('line2')
      console.log((new Date().getTime() - window.localStorage.getItem('wartime')) / (60 * 1000)) //分钟差

    },
    methods: {
      setcjddyjz() {
        console.log('cjddyjz', this.cjddyjz)
        window.localStorage.setItem('cjddyjz', this.cjddyjz)
      },
      getdata() {
        //setTimeout(this.getdata(),5000)
        this.$get(this.$api + '/mch_order_listen/mch_order_listen_statistics_today').then((e) => {
          if (e.code == 0) {
            this.dataobj = e.data
            this.alert_config = e.data.alert_config
            this.initallechar()
            this.loading = false
          }
          else
          {
            this.$notify({
              title: '失败',
              message: e.msg,
              type: 'error'
            });
          }
          setTimeout(this.getdata, 300000)
          //setTimeout(this.getdata,5000)
        })
      },
      initallechar() { //初始化所有图表及相关数据
        //初始化图表数据
        this.initechartsforline('line1', this.dataobj.order_listen_info.line_data, '24小时数据曲线')
        this.initechartsforpie('pie1', this.dataobj.order_listen_info.pie_data.pay_success, '支付回调成功比值')
        this.initechartsforpie('pie2', this.dataobj.order_listen_info.pie_data.checkoutnotify, '订单整体成功比值')
        this.initechartsforpie('pie7', this.dataobj.order_listen_info.pie_data.payment_rate, '支付成功率')
        this.initechartsforpie('pie8', this.dataobj.order_listen_info.pie_data.process_success, '购买流程完整比值')
        //验证是否需要报警
        let pay_success_percentage = (this.dataobj.order_listen_info.pie_data.pay_success[1].value / this.dataobj.order_listen_info.pie_data.pay_success[0].value * 100).toFixed(2)
        let checkoutnotify_percentage = (this.dataobj.order_listen_info.pie_data.checkoutnotify[1].value / this.dataobj.order_listen_info.pie_data.checkoutnotify[0].value * 100).toFixed(2)
        let payment_rate_percentage = (this.dataobj.order_listen_info.pie_data.payment_rate[1].value / this.dataobj.order_listen_info.pie_data.payment_rate[0].value * 100).toFixed(2)
        let process_success_percentage = (this.dataobj.order_listen_info.pie_data.process_success[1].value / this.dataobj.order_listen_info.pie_data.process_success[0].value * 100).toFixed(2)
        let warring = false
        if (this.alert_config.pay_success_percentage >= pay_success_percentage) {
          warring = true
          this.series_war = true
        }
        if (this.alert_config.checkoutnotify_percentage >= checkoutnotify_percentage) {
          warring = true
          this.series_war = true
        }
        if (this.alert_config.payment_rate_percentage >= payment_rate_percentage) {
          warring = true
          this.series_war = true
        }
        if (this.alert_config.process_success_percentage >= process_success_percentage) {
          warring = true
          this.series_war = true
        }
        let cjdd_data = this.dataobj.order_listen_info.line_data.series_data[0].data
        console.log('创建订单值数组',cjdd_data)
        console.log('创建订单值',cjdd_data[cjdd_data.length - 2])
        console.log('创建订单预警值',this.cjddyjz)
        if(cjdd_data[cjdd_data.length - 2] <= this.cjddyjz && this.cjddyjz){
          warring = true
          this.cjdd_war = true
        }
        let wartime = (new Date().getTime() - window.localStorage.getItem('wartime')) / (60 * 1000)
        if (warring && wartime >= 15 && this.openvalue) { //大于15分钟
          this.showwarring()
        }
      },
      initechartsforpie(elemid, elemdata, elemtitle) { //饼图初始化
        const line2Chart = this.$echarts.init(document.getElementById(elemid));
        line2Chart.clear();
        line2Chart.off('click') // 如果不加off事件，就会叠加触发
        line2Chart.showLoading({
          text: '正在努力的读取数据中...'
        });

        const line2option = {
          title: {
            text: elemtitle,
            left: 'center',
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '2%',
            left: 'center'
          },
          series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: '{d}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [{ name: elemdata[0].name, value: elemdata[0].value - elemdata[1].value }, { name: elemdata[1].name, value: elemdata[1].value }]
          }]
        };


        line2Chart.on('click', function (params) {})
        line2Chart.hideLoading()
        line2Chart.setOption(line2option);
      },
      initechartsforline(elemid, elemdata, elemtitle) { //线图初始化
        const line2Chart = this.$echarts.init(document.getElementById(elemid));
        line2Chart.clear();
        line2Chart.off('click') // 如果不加off事件，就会叠加触发
        line2Chart.showLoading({
          text: '正在努力的读取数据中...'
        });

        const line2option = {
          title: {
            text: elemtitle
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: '90%',
            left: 'center',
            data: elemdata.legend_data
          },
          grid: {
            left: '0',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            },
            right: 60, // echarts工具栏样式，距离右侧60px，https://echarts.apache.org/zh/option.html#toolbox.right
            top: 20 // echarts工具栏样式，距离顶部20px
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: elemdata.xAxis_data
          },
          yAxis: {
            type: 'value'
          },
          series: elemdata.series_data
        };


        line2Chart.on('click', function (params) {
          console.log(params);
        })
        line2Chart.hideLoading()
        line2Chart.setOption(line2option);
      },
      getparam() {
        this.dialogVisible = true
      },
      showwarring() { //弹出报警
        this.dialogVisible2 = true
        this.$refs.initAudio.currentTime = 0;
        this.$refs.initAudio.play()
        //更新当前报警时间
        var strtime = new Date().getTime().toString()
        window.localStorage.setItem('wartime', strtime)
      },
      audioFinished() {
        this.$refs.initAudio.play()
      },
      warringclose() { //关闭报警提示
        this.dialogVisible2 = false
        this.$refs.initAudio.pause()
      },
      openwarring() { //打开报警开关
        if (this.openvalue) {
          this.$refs.initAudio.play()
          this.$refs.initAudio.pause()
          //验证是否需要报警
          let pay_success_percentage = (this.dataobj.order_listen_info.pie_data.pay_success[1].value / this.dataobj.order_listen_info.pie_data.pay_success[0].value * 100).toFixed(2)
          let checkoutnotify_percentage = (this.dataobj.order_listen_info.pie_data.checkoutnotify[1].value / this.dataobj.order_listen_info.pie_data.checkoutnotify[0].value * 100).toFixed(2)
          let payment_rate_percentage = (this.dataobj.order_listen_info.pie_data.payment_rate[1].value / this.dataobj.order_listen_info.pie_data.payment_rate[0].value * 100).toFixed(2)
          let process_success_percentage = (this.dataobj.order_listen_info.pie_data.process_success[1].value / this.dataobj.order_listen_info.pie_data.process_success[0].value * 100).toFixed(2)
          let warring = false
          if (this.alert_config.pay_success_percentage >= pay_success_percentage) {
            warring = true
            this.series_war = true
          }
          if (this.alert_config.checkoutnotify_percentage >= checkoutnotify_percentage) {
            warring = true
            this.series_war = true
          }
          if (this.alert_config.payment_rate_percentage >= payment_rate_percentage) {
            warring = true
            this.series_war = true
          }
          if (this.alert_config.process_success_percentage >= process_success_percentage) {
            warring = true
            this.series_war = true
          }
          let cjdd_data = this.dataobj.order_listen_info.line_data.series_data[0].data
          console.log('创建订单值数组',cjdd_data)
          console.log('创建订单值',cjdd_data[cjdd_data.length - 2])
          console.log('创建订单预警值',this.cjddyjz)
          if(cjdd_data[cjdd_data.length - 2] <= this.cjddyjz && this.cjddyjz){
            warring = true
            this.cjdd_war = true
          }
          let wartime = (new Date().getTime() - window.localStorage.getItem('wartime')) / (60 * 1000)
          console.log(warring)
          if (warring && wartime >= 15 && this.openvalue) { //大于15分钟
            this.showwarring()
          }
        }
        else
        {
          this.$refs.initAudio.pause()
        }
      },
      saveconifg() { //保存设置
        this.$post(this.$api + '/mch_order_listen/set_mch_order_listen_alert_config', this.alert_config).then((e) => {
          if (e.code == 0) {
            this.$notify({
              title: '成功',
              message: e.msg,
              type: 'success'
            });
            this.dialogVisible = false
          }
          else
          {
            this.$notify({
              title: '失败',
              message: e.msg,
              type: 'error'
            });
          }
        })
      }
    }
  }
</script>
<style scoped>
  .boxlist {
    width: 80%;
    margin: 0 auto;
    border: 2px solid #459df5;
    color: #459df5;
    border-radius: 10px;
    text-align: center;
    font-size: 18px;
  }

  .boxlist_title {
    margin: 5px;
  }

  .boxlist_num {
    margin: 5px;
  }

  .wartitle {
    text-align: center;
    font-size: 20px;
    padding: 10px 0;
  }
</style>